<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />

    <link rel="stylesheet" href="./assets/css/layui.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
    <script type="text/javascript" src="js/utils/rem.js"></script>

    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
    <!-- <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/minimap.js"></script> -->
    <!-- <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> -->
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <title>资源池监控中心</title>
  </head>

  <body style="visibility: hidden">
    <div class="container-flex" tabindex="0" hidefocus="true">
      <!-- 左边区域 -->
      <div class="box-left">
        <div class="left-top">
          <div class="current-num">
            <div>资源池信息</div>
            <p>持续安全运行监控186天</p>
          </div>
        </div>
        <div class="left-center" class="select">
          <div class="title-box">
            <h6>性能指标</h6>
            <img class="line-img" src="./assets/images/line-blue.png" alt="" />
            <button id="filBtn">
              <img src="./assets/images/select_icon.png" alt="" />筛选
            </button>
          </div>

          <!-- 筛选按钮 下拉select框 -->
          <div class="chart-box">
            <div class="filter-con" id="filCon" data-type="1">
              <div class="select" tabindex="0" hidefocus="true">
                <div class="select-div">派件</div>
                <ul class="select-ul">
                  <li class="active" data-value="1">派件</li>
                  <li data-value="2">寄件</li>
                </ul>
              </div>
              <div class="select" tabindex="0" hidefocus="true">
                <div class="select-div">公司</div>
                <ul class="select-ul company">
                  <li class="active" data-value="">公司</li>
                  <li data-value="1">顺丰</li>
                  <li data-value="2">京东</li>
                  <li data-value="3">EMS</li>
                </ul>
              </div>
              <div class="select" tabindex="0" hidefocus="true">
                <div class="select-div">类型</div>
                <ul class="select-ul">
                  <li class="active" data-value="">类型</li>
                  <li data-value="0">文件</li>
                  <li data-value="1">物品</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="title-box">
            <h6>系统健康度</h6>
          </div>
          <div class="chart-box pie-chart">
            <div id="pie"></div>
            <div>
              <div class="pie-data"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间区域 -->
      <div class="box-center">
        <div class="center-top">
          <h1>资源池监控中心</h1>
        </div>
        <!-- 天气和选择框 -->
        <div class="center-center">
          <!-- 天气 -->
          <div class="weather-box">
            <div class="data">
              <p class="time" id="time">00:00:00</p>
              <p id="date"></p>
            </div>
            <div class="weather">
              <img
                id="weatherImg"
                src="./assets/images/weather/weather_img01.png"
                alt=""
              />
              <div id="weather">
                <p class="active">多云</p>
                <p>16-22℃</p>
                <p>江西省南昌市</p>
              </div>
            </div>
          </div>
          <img src="./assets/images/line_bg.png" alt="" />
          <!-- 派/寄选择框 -->
          <div class="select-box">
            <ul id="barType" class="change-view">
              <li class="active" data-value="1">机房</li>
              <li data-value="2">业务</li>
            </ul>
            <div data-type="2">
              <div class="select" tabindex="0" hidefocus="true">
                <div class="select-div">公司</div>
                <ul class="select-ul company">
                  <li class="active" data-value="">公司</li>
                  <li data-value="1">顺丰</li>
                  <li data-value="2">京东</li>
                  <li data-value="2">EMS</li>
                </ul>
              </div>
              <div class="select" tabindex="0" hidefocus="true">
                <div class="select-div">类型</div>
                <ul class="select-ul">
                  <li class="active" data-value="">快件类型</li>
                  <li data-value="0">文件</li>
                  <li data-value="1">物品</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 拓扑框 -->
        <div class="center-bottom">
          <div class="chart-box">
            <div id="topoGrapth" style="height: calc(100% - 8px)">
              <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md8">
                  <div class="layui-input-wrap">
                    <!-- <div class="layui-input-prefix">
                      <i class="layui-icon layui-icon-search"></i>
                    </div> -->
                    <!-- <input
                      type="text"
                      name="A"
                      value=""
                      placeholder="Field A"
                      class="layui-input"
                      lay-affix="clear"
                    /> -->
                    <input
                      type="text"
                      lay-affix="search"
                      lay-filter="search"
                      lay-options="{split: true}"
                      placeholder="搜索…"
                      class="layui-input"
                    />
                  </div>
                </div>
                <!-- <div class="layui-btn-container layui-col-xs12">
                  <button
                    class="layui-btn"
                    lay-submit
                    lay-filter="demo-table-search"
                  >
                    Search
                  </button>
                </div> -->
              </form>
              <table class="layui-hide" id="ID-table-demo-search"></table>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="box-right">
        <div class="right-top">
          <div class="title-box">
            <h6 id="barTitle">监控报警</h6>
            <img class="line-img" src="./assets/images/line-blue.png" alt="" />
            <span class="unit">每分钟刷新</span>
          </div>
          <div class="data-box">
            <div id="warning-box">
              <ul id="warningA"></ul>
              <ul id="warningB"></ul>
            </div>
          </div>
        </div>
        <div class="right-center">
          <div class="title-box">
            <p id="switchBtn">
              <span class="active" data-dataType="income">详情</span
              ><img
                class="line-img"
                src="./assets/images/line-blue.png"
                alt=""
              /><span data-dataType="expend">数据</span>
            </p>
            <img class="line-img" src="./assets/images/line-blue.png" alt="" />
            <button id="dateBtn">
              <img src="./assets/images/data_icon.png" alt="" />日期
            </button>
          </div>
          <div class="data-box">
            <p class="data-number" id="totalProfit">
              网元名称：LK-A2-403-C19-RGS6250-TOR-1-A
              <br />
              告警内容：2025-01-21 15:56:05 重要告警：Ping连通性异常
            </p>

            <div class="time-box" id="timeBox">
              <div class="time-div">
                <input class="time-input" type="text" value="" id="startTime" />
                <img src="./assets/images/selsct_time.png" alt="" />
              </div>
              <div class="time-div end">
                <input class="time-input" type="text" value="" id="endTime" />
                <img src="./assets/images/selsct_time.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="title-box">
            <p class="zhiban">值班信息</p>
            <button id="setBtn">
              <img src="./assets/images/settings_icon.png" alt="" />设置
            </button>
          </div>
          <div class="data-box">
            <div class="settings-box">
              <p>
                <img
                  src="./assets/images/teacher_icon.png"
                  alt=""
                />今日值班：<span id="name_a"></span>李剑春<span
                  id="date_a"
                ></span>
              </p>
              <p>
                <img
                  src="./assets/images/people_iocn.png"
                  alt=""
                />负责人：<span id="lea_a">熊志勇</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 容器区域，点击下方数字放大对应板块 -->
    <div class="container">
      <div class="pop-up">
        <span class="close-pop"></span>
        <h2 class="title">派件入库量占比</h2>
        <div class="chart-box pie-chart">
          <div id="pie1"></div>
          <div>
            <div class="pie-data"></div>
          </div>
        </div>
      </div>

      <!-- 网元详情表格 -->
      <div class="pop-up">
        <span class="close-pop"></span>
        <h2 class="title">网元详情</h2>
        <div class="warning-table">
          <table
            class="layui-hide"
            id="ID-table-demo-page"
            lay-size="sm"
          ></table>
          <script type="text/html" id="ID-table-demo-page-pagebar"></script>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/module/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/module/echarts.min.js"></script>
  <script type="text/javascript" src="js/module/layui.js"></script>
  <script type="text/javascript" src="js/layer/layer.min.js"></script>
  <script type="text/javascript" src="js/layer/laydate/laydate.js"></script>
  <script type="text/javascript" src="js/base.js"></script>
  <script type="text/javascript" src="js/utils/autoScroll.js"></script>
  <script src="./js/topo/register.js" type="module"></script>
  <!-- <script src="./js/topo/getBusinessData.js" type="module"></script> -->

  <!-- <script src="./js/topo/topoDataForBusiness.js" type="module"></script> -->

  <script type="module">
    import {
      drawComputerRoomTopo,
      drawComputerRoomTopo2,
      drawBusinessTable,
      drawBusinessTopo,
    } from "./js/topo/drawCanvas.js";

    import {
      renderWarningBox,
      renderWarningTable,
    } from "./js/getWarningData.js";

    $("document").ready(function () {
      $("body").css("visibility", "visible");

      drawComputerRoomTopo2(); // 初始化业务数据
      // drawBusinessTable(); // 初始化业务数据

      // 邮件详情按钮，进入蒙版
      $("#contextMenu").on("click", "li", function () {
        if ($("#contextMenu").attr("nodeId")) {
          // 链接跳转至 id数据
          console.log("nodeId 信息: " + $("#contextMenu").attr("nodeId"));

          var index = $(this).index();
          $(".container")
            .attr("style", "visibility: visible")
            .find(".pop-up")
            .eq(index)
            .attr("style", "visibility: visible")
            .siblings()
            .attr("style", "visibility: hidden");
          // 查看表格
          if ((index = 1)) {
            $(".container")
              .find(".pop-up")
              .eq(index)
              .find(".title")
              .text("网元告警详情：" + $("#contextMenu").attr("nodeId"));
            // 发送请求
            // axiosGetRequst("/api/getNodeInfo", {
            //   id: $("#contextMenu").attr("nodeId"),
            // }).then((resp) => {
            //   console.log("resp", resp);
            // });
            renderWarningTable();
          } else {
          }
        }
        $("#contextMenu")
          .css({ left: -100 + "px" })
          .removeAttr("nodeId");
      });

      // 点击关闭按钮，关闭弹窗
      $(".close-pop").on("click", function () {
        console.log("parent()", $(this).parent().parent());
        $(this).parent().attr("style", "visibility: hidden");
        $(this).parent().parent().attr("style", "visibility: hidden");
      });

      $(".select-box>.change-view").on("click", "li", function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        $(this).text() == "机房"
          ? drawComputerRoomTopo2()
          : // ? $("#topoGrapth canvas").show() && drawComputerRoomTopo2()
            // ? drawComputerRoomTopo2() && $(".layui-form").hide()
            // ? drawComputerRoomTopo() && $(".layui-form").hide()
            drawBusinessTable();
        // $("#topoGrapth canvas").hide() && drawBusinessTable();
        // drawBusinessTable() && $(".layui-form").show();
      });
    });

    renderWarningBox();
  </script>
</html>
